<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <span th:include="~{include::mystyle}"></span>
  <script>
     $(function (){
       let timer = null;
       let time=60;
       function showTime(){
         $(".btn-success").html(time+"秒后可重发");
         time--;
         if(time==0){
           $(".btn-success").html("获取验证码");
           $(".btn-success").removeAttr("disabled");
           timer.clearInterval();
           time=60;
         }
       }
       $(".btn-success").click(function (){
           $.get(
                   "send/"+$("#mobile").val(),
                   function (data){
                      if(data){
                        alert("发送成功");
                        //发送按钮禁用一分钟，
                        $(".btn-success").attr("disabled","disabled");
                        timer = setInterval(showTime,1000);
                      }else{
                        alert("发送失败");
                      }
                   }
           )
       })
     })
  </script>
</head>
<body>
    <div class="container">
      <form class="form-horizontal" method="post" th:action="@{/mlogin}" role="form">

        <div class="form-group">
          <label for="mobile" class="col-sm-2 control-label">手机号</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="手机号">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="inputPassword3" placeholder="密码" name="code">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-4">

            <button class="btn btn-info" type="submit">登录</button>
          </div>
        </div>
      </form>
      <button class="btn btn-success">发送验证码</button>
      <span th:utext="${msg}"></span>
    </div>
</body>
</html>
